<template>
  <div>
    <div class="form-box">
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="用户注册" name="userRegister">
          <el-form label-width="100px" :model="userRegisterForm" :rules="userRegisterFormRules" ref="userRegisterFormRef" status-icon>
            <el-form-item label="用户名" prop="username">
              <el-input v-model="userRegisterForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="userRegisterForm.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPassword">
              <el-input type="password" v-model="userRegisterForm.checkPassword"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="userRegisterForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="userRegisterForm.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="userRegister">注册</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商家注册" name="merchantRegister">
          <el-form label-width="100px" :model="merchantRegisterForm" :rules="merchantRegisterFormRules" ref="merchantRegisterFormRef" status-icon>
            <el-form-item label="用户名" prop="username">
              <el-input v-model="merchantRegisterForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="merchantRegisterForm.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPassword">
              <el-input type="password" v-model="merchantRegisterForm.checkPassword"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="merchantRegisterForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="merchantRegisterForm.email"></el-input>
            </el-form-item>
            <el-form-item label="商家名" prop="nickname">
              <el-input v-model="merchantRegisterForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="商家地址" prop="address">
              <el-input v-model="merchantRegisterForm.address"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="merchantRegister">注册</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data () {
    const checkSpace = (rule, value, callback) => {
      const regSpace = /\s/
      if (!regSpace.test(value)) {
        return callback()
      }
      callback(new Error('不能有空格'))
    }
    // 确认密码的验证
    const checkPassword = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请再次输入密码'))
      }
      if (value === this.userRegisterForm.password || value === this.merchantRegisterForm.password) {
        return callback()
      }
      callback(new Error('两次输入的密码不一致'))
    }
    // 手机号的验证规则
    const checkPhone = (rule, value, callback) => {
      // 验证手机号的正则表达式
      const regMobile = /^([1][3,4,5,6,7,8,9])\d{9}$/
      if (regMobile.test(value)) {
        return callback()
      }
      callback(new Error('请输入正确的手机号码'))
    }
    // 邮箱的验证规则
    const checkEmail = (rule, value, callback) => {
      // 验证邮箱的正则表达式
      const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      if (regEmail.test(value)) {
        return callback()
      }
      callback(new Error('请输入合法的邮箱地址'))
    }
    return {
      activeName: 'userRegister',
      userRegisterForm: {
        username: '',
        password: '',
        checkPassword: '',
        phone: '',
        email: '',
        time: ''
      },
      merchantRegisterForm: {
        username: '',
        password: '',
        checkPassword: '',
        phone: '',
        email: '',
        address: '',
        nickname: '',
        time: ''
      },
      userRegisterFormRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '请输入3~20个字符',
            triggers: 'blur'
          },
          {
            validator: checkSpace,
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 20,
            message: '请输入6~20个字符',
            trigger: 'blur'
          },
          {
            validator: checkSpace,
            trigger: 'blur'
          }
        ],
        checkPassword: [
          {
            required: true,
            validator: checkPassword,
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          },
          {
            validator: checkPhone,
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            validator: checkEmail,
            trigger: 'blur'
          }
        ]
      },
      merchantRegisterFormRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '请输入3~20个字符',
            triggers: 'blur'
          },
          {
            validator: checkSpace,
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 20,
            message: '请输入6~20个字符',
            trigger: 'blur'
          },
          {
            validator: checkSpace,
            trigger: 'blur'
          }
        ],
        checkPassword: [
          {
            required: true,
            validator: checkPassword,
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          },
          {
            validator: checkPhone,
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            validator: checkEmail,
            trigger: 'blur'
          }
        ],
        nickname: [
          {
            required: true,
            message: '请输入商家名',
            trigger: 'blur'
          },
          {
            validator: checkSpace,
            trigger: 'blur'
          }
        ],
        address: [
          {
            required: true,
            message: '请输入商家地址',
            trigger: 'blur'
          },
          {
            validator: checkSpace,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    resetForm () {
      this.$refs.userRegisterFormRef.resetFields()
      this.$refs.merchantRegisterFormRef.resetFields()
    },
    userRegister () {
      this.$refs.userRegisterFormRef.validate(async (valid) => {
        if (!valid) {
          return false
        }
        this.userRegisterForm.time = this.$options.filters.dateFormat(new Date().getTime())
        const { data: res } = await this.$axios.post('/register/userRegister', this.userRegisterForm)
        if (res.status !== 2000) {
          return this.$message.error('注册失败')
        }
        this.$message.success('注册成功')
        await this.$router.push('/login')
      })
    },
    merchantRegister () {
      this.$refs.merchantRegisterFormRef.validate(async (valid) => {
        if (!valid) {
          return false
        }
        this.merchantRegisterForm.time = this.$options.filters.dateFormat(new Date().getTime())
        const { data: res } = await this.$axios.post('/register/restaurantRegister', this.merchantRegisterForm)
        if (res.status !== 2000) {
          return this.$message.error('注册失败')
        }
        this.$message.success('注册成功')
        await this.$router.push('/login')
      })
    },
    tabClick () {
      this.resetForm()
    }
  }
}
</script>

<style scoped>
  .form-box {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-250px, -250px);
  }
</style>
